<template>
  <div>
    <!-- 输入框 -->
    <el-input
        style="width:50%;margin-bottom: 10px"
        placeholder="请根据订单编号输入搜索内容"
        v-model="pagination.queryString"
        @change="search"
        clearable>
    </el-input>
    <el-button @click="PackageList()" class="dalfBut">查询</el-button>

    <!-- 数据单向绑定  :data表格数据 -->
    <el-table :data="dataList" border>
      <!-- prop属性  与此处数据的属性一致 -->
      <el-table-column prop="id"   label="订单编号" width="80" ></el-table-column>
      <el-table-column prop="userId"   label="用户编号" width="80" ></el-table-column>
      <el-table-column prop="userName"   label="用户姓名" width="80" ></el-table-column>
      <el-table-column prop="userPhone" label="用户电话" width="200" ></el-table-column>
      <el-table-column prop="userAddress"    label="用户站点" width="150" ></el-table-column>
      <el-table-column prop="driverId" label="员工编号" width="80" ></el-table-column>
      <el-table-column prop="driverPhone" label="员工电话" width="200" ></el-table-column>
      <el-table-column prop="driverName" label="员工姓名" width="200" ></el-table-column>
      <el-table-column prop="goodName" label="货物名称" width="80" ></el-table-column>
      <el-table-column prop="type" label="货物类型" width="80" >
        <template slot-scope="scope">
          {{ scope.row.type==0?'食品':scope.row.type==1?'电子产品':scope.row.type==2?'服装':scope.row.type==3?'日用品':'家具' }}
        </template>
      </el-table-column>
      <el-table-column prop="weight" label="重量" width="80" ></el-table-column>
      <el-table-column prop="price" label="价格" width="80" ></el-table-column>
      <el-table-column prop="state" label="状态" width="120">
        <template slot-scope="scope">
          {{ scope.row.state==0?'未发货':scope.row.state==1?'发货未入站':scope.row.state==2?'入站':scope.row.state==3?'出站派送中':scope.row.state==4?'用户未接收':"用户已接收"}}
        </template>
      </el-table-column>

      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="primary" size="small"   circle @click="takePackage(scope.row)" >拿快递</el-button>
          <el-button type="primary" size="small"   circle @click="takeOver(scope.row)" >确认接受</el-button>
        </template>
      </el-table-column>
    </el-table>


    <!-- 分页  :属性="" 单向数据绑定 -->
    <el-pagination
        class="pagiantion"
        @current-change="PackageList"
        :current-page="pagination.currentPage"
        :page-size="pagination.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="pagination.total">
    </el-pagination>



  </div>
</template>

<script>
import * as AMapLoader from "@amap/amap-jsapi-loader";

export default {
  name: "PackageView",
  data() {
    return {
      pagination: {       //分页相关模型数据
        currentPage: 1, //当前页码
        pageSize: 4,    //每页显示的记录数
        total: 100,        //总记录数
        queryString:this.$store.getters.getUser.name//查询条件
      },
      dataList: [],
      formData:{},
      /*rules: {//校验规则
        userId: [{ required: true, message: '用户编号为必填项', trigger: 'blur' }],
        userName: [{ required: true, message: '用户姓名为必填项', trigger: 'blur' }],
        userPhone: [{ required: true, message: '用户电话为必填项', trigger: 'blur' }],
        userAddress: [{ required: true, message: '用户住址为必填项', trigger: 'blur' }],
        driverId: [{ required: true, message: '员工编号为必填项', trigger: 'blur' }],
        driverPhone: [{ required: true, message: '员工电话为必填项', trigger: 'blur' }],
        driverName: [{ required: true, message: '员工姓名为必填项', trigger: 'blur' }],
        goodName: [{ required: true, message: '货物名称为必填项', trigger: 'blur' }],
        type: [{ required: true, message: '货物类型为必填项', trigger: 'blur' }],
        weight: [{ required: true, message: '订单重量为必填项', trigger: 'blur' }],
        price: [{ required: true, message: '价格为必填项', trigger: 'blur' }],
        state: [{ required: true, message: '订单状态为必填项', trigger: 'blur' }]

      }*/
    }
  },
  created() {
    this.PackageList()
  },
  methods: {

    //若没有传递当前页码 ， 默认展示第一页
    PackageList(page = 1) {
      this.pagination.currentPage = page
      let param= {
        currentPage: this.pagination.currentPage,
        pageSize: this.pagination.pageSize,
        queryString: this.pagination.queryString
      }
      axios.get('http://localhost:8099/user/package', {params: param})
          .then(response => {  //response.data.data 等价于 Map 有PageInfo&query
            console.log("访问后台")
            console.log(response)
            this.pagination.total = response.data.total
            this.dataList = response.data.records
          })
          .catch(error => {
            console.log(error)
          })
    },

    //弹出编辑窗口
    search(){
      this.PackageList()
    },

    //拿快递，跳转到导航页面
    takePackage(row){
      console.log(row.userAddress)
      const  city=row.userAddress
      this.$store.commit("SET_CITY",city)
      this.$router.push('/user/map');
    },

    takeOver(row){
          console.log(row.id)
          axios.post(`http://localhost:8099/user/over/${row.id}`).then(
              res=>{
                console.log(res.data)
              }
          )
    }

  }
}
</script>

<style scoped>

</style>